import React, { useState } from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  Alert,
  ImageBackground,
  Modal,
  TouchableHighlight,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import dp2px from '../util/Density';

//网络接口
function getMoviesFromApiAsync() {
  return fetch(
    'https://facebook.github.io/react-native/movies.json',
  )
    .then(response => response.json())
    .then(responseJson => {
      console.log('响应：%s', responseJson.movies);
      //return responseJson.title;
    })
    .catch(error => {
      console.error(error);
    });
}

const App = () => {
  const navigation = useNavigation();
  const [privacyDialogVisible, setPrivacyDialogVisible] = useState(false);

  return (
    // 在安全可视区域内渲染内容，为导航栏和刘海流出空间。针对iOS 
    <SafeAreaView style={styles.centerLayout}>
      //状态栏
      <StatusBar
        translucent={true}//是否透明
        backgroundColor="transparent"
        barStyle={'light-content'}//文本颜色
      />
      <ImageBackground
        source={require('../../image/bg_main.png')}
        resizeMode="cover"//保持纵横比缩放，直到宽高都大于容器
        style={styles.imageLayout}
      >
        <ScrollView
          contentInsetAdjustmentBehavior="automatic">//自动判断需不需要适配安全区域
          <View style={styles.centerLayout}>

            <Text style={[styles.titleText, { marginTop: 50 }]}>
              启动界面
            </Text>

            <TouchableHighlight
              style={[styles.normalButton, { marginTop: 50 }]}
              underlayColor="skyblue"
              onPress={() => {
                setPrivacyDialogVisible(true);
              }}>
              <Text style={styles.labelText}>
                隐私政策弹窗
              </Text>
            </TouchableHighlight>

            <View style={{ height: 50 }} />

            <Text style={styles.labelText}>
              登录输入框
            </Text>

            <TouchableHighlight
              style={[styles.normalButton, { marginTop: 50 }]}
              underlayColor="skyblue"
              onPress={() => {
                //Alert.alert('跳转登录界面')
                // var height = dp2px(100);
                // console.log('-------测试 %d', height)
                navigation.navigate('Main')
                //getMoviesFromApiAsync();
              }}>
              <Text style={styles.labelText}>
                登录
              </Text>
            </TouchableHighlight>

          </View>
        </ScrollView>
        {/* 隐私弹窗 */}
        <Modal
          animationType="slide"//动画
          transparent={true}//背景透明
          visible={privacyDialogVisible}
          onRequestClose={() => {
            setPrivacyDialogVisible(!privacyDialogVisible)
          }}>
          <View style={styles.centerLayout}>
            <View style={[styles.dialogLayout]}>
              <Text style={[styles.titleText, { marginTop: 30 }]}>个人信息保护协议</Text>

              <Text style={[styles.labelText, { marginTop: 30, marginHorizontal: 20 }]}>本应用需联网用于提供相关服务。点击“同意"，即表示.....</Text>

              <TouchableHighlight
                style={[styles.normalButton, { marginTop: 20, marginBottom: 30,width: 200 }]}
                underlayColor="skyblue"
                onPress={() => {
                  setPrivacyDialogVisible(false);
                }}>
                <Text style={styles.labelText}>
                  同意
                </Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
      </ImageBackground>

    </SafeAreaView >
  );
}

const styles = StyleSheet.create({
  centerLayout: {
    flex: 1,//主轴比例(副轴铺满)
    justifyContent: 'center',//沿主轴的排列方式
    alignItems: 'center',//沿次轴的排列方式
  },
  imageLayout: {
    flex: 1,
    alignSelf: 'stretch',//自身沿次轴的排列方式
  },
  dialogLayout: {
    backgroundColor: "black",
    // borderRadius: 20,
    width: dp2px(521),
    height: dp2px(275),
    alignItems: 'center',
  },

  titleText: {
    color: 'white',
    // fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',//对齐
  },
  labelText: {
    color: 'white',
    // fontSize: 16,
    textAlign: 'center',
  },
  normalButton: {
    backgroundColor: 'blue',
    borderRadius: 20,
    padding: 10,
    // elevation: 2,
  },
  // separatorView: {//分隔符
  //   marginVertical: 20,
  //   borderBottomColor: '#737373',
  //   borderBottomWidth: StyleSheet.hairlineWidth,
  // },
});

export default App;
